/**
 * Created by Dalyn on 2017/5/4.
 */
import React from "react";
import Relay from 'react-relay';
import {hashHistory} from 'react-router';
import { Table,Icon,message } from 'antd';
import ProductionProcessMutation from './mutation/ProductionProcessMutation';
import "./css/productionManagement_process.css";
import "./css/productionManagement_common.css";

import {Button} from 'fly';

export default class ProductionProcess extends React.Component {
    constructor(){
        super();
        this.state={
            enId: sessionStorage.getItem('enterpriseId'),
            totalResult : '',          //分页总条数
            pageSize : '10',      //每页显示条数
            pageNum : '1',
            processData: [],
            searchInput: '',
            searchStyleNo: '',
            loading: true,
        }
        this.uid = sessionStorage.getItem('uid')
        this.enterpriseId = sessionStorage.getItem('enterpriseId')
    }

    componentWillMount() {
      this.getProductProcess()
    }

    getProductProcess() {
      Relay.Store.commitUpdate(
          new ProductionProcessMutation({
              enId: this.enterpriseId,
              status: '3, 4', //已签订
              orderType: 1,  // 成衣 1
              pageSize: this.state.pageSize,
              pageNum: this.state.pageNum,
              partbName: this.state.searchInput,
              styleNo: this.state.searchStyleNo,
          }),
          {
              onFailure: () => {
                  console.log("请求失败")
                  this.setState({
                    loading: false
                  })
              },
              onSuccess: (response) => {
                let errorCode = response.getproductProcess.getproductProcess.errorCode
                if(errorCode == 0) {
                  let processData = response.getproductProcess.getproductProcess.processRecords
                  let totalResult = response.getproductProcess.getproductProcess.totalResult
                  if (processData) {
                    this.setState({
                      processData: processData,
                      totalResult:totalResult,
                      loading: false
                    })
                  }
                }
              }
          }
      );
    }

    _SearchByClient(){
        this.setState({
            pageNum: 1
        },()=>{
            this.getProductProcess()
        })
    }
    searchChange(e) {
      this.setState({
        searchInput: e.target.value
      })
    }
    /*搜索-款号*/
    searchStyleNo(e) {
        this.setState({
            searchStyleNo: e.target.value
        })
    }
    onfocusInput(){

    }

    bluronInput(){

    }

    /*页数改变*/
    pageChange(e) {
      let numtest = /^[0-9]*$/;
      let text = e.target.value;
      if (!numtest.test(text)) {
          return
      } else {
        this.setState({ pageNum: text})
      }
    }

    /*总页数*/
    pageTotal() {
        return Math.ceil(this.state.totalResult / this.state.pageSize)
    }
    /*上一页*/
    leftBtn() {
        if (this.state.pageNum <= 1) {
            return;
        } else {
            this.state.pageNum --;
            // this.bluron();
            this.setState({
                pageNum: this.state.pageNum,
            })
            this.getProductProcess()
        }
    }

    /*下一页*/
    rightBtn() {
        let pageTotal = this.pageTotal();
        if (this.state.pageNum >= pageTotal) {
            return;
        } else {
            this.state.pageNum++;
            this.setState({
                pageNum: this.state.pageNum,
            })
            this.getProductProcess()
        }
    }

    /*确定按钮*/
    confirm() {
        let pageTotal = this.pageTotal();
        let pageNum = this.state.pageNum;
        if (pageNum < 1) {
            this.state.pageNum=1;
        } else if (pageNum > pageTotal) {
            this.state.pageNum = pageTotal;
        } else {
            this.state.pageNum = pageNum;
        }
        this.getProductProcess()
    }

    updateProcessClick(record) {
      hashHistory.push({
        pathname:'/ProductionProcessDetail/',
        state:{'partBname': record.partBname,'gid':record.gid,'orderId':record.orderId,'quality':record.quality,'styleNo':record.styleNo}
      })
    }

    render() {
      let dataLength = this.state.processData.length
      const columns = [
        {
          title: '订单编号',
          dataIndex: 'orderId',
          key: 'orderId',
          width: 200,
          render: ((text, record, index) => {
            this.state.processData[index].opa0 = 1
            if (index > 0 && index < dataLength && (this.state.processData[index].orderId == this.state.processData[index-1].orderId)) {
              if(index+1 != dataLength) {
                this.state.processData[index+1].opa0 = 0
              }
              if (record.opa0 == 0) {
                <span style={{opactity: '0'}}>{record.orderId}</span>
              }
            } else {
              return record.orderId
            }
          })
        }, {
          title: '客户',
          dataIndex: 'partBname',
          key: 'partBname',
          width: 231,
              render: ((text, record, index) =>{
                  // return <span title={record.customerName}>{record.customerName}</span>
                  return (
                      <span title={!record.partBname ? record.traderName : record.partBname} className="">
                    {
                        !record.partBname ?
                            <span>{record.traderName} {record.traderName != '' && record.traderName != null ? <a style={{color:'red',cursor:'initial'}}>(未关联)</a> : null}</span>
                            : record.partBname
                    }
                    </span>
                  )
              }),
        }, {
          title: '款号',
          dataIndex: 'styleNo',
          key: 'styleNo',
          width: 138,
        }, {
          title: '数量',
          dataIndex: 'quality',
          key: 'quality',
          width: 80,
        },{
          title: '裁剪数',
          dataIndex: 'cutQua',
          key: 'cutQua',
          width: 80,
        },{
          title: '裁剪欠数',
          dataIndex: 'cutQuaRemain',
          key: 'cutQuaRemain',
          width: 80,
          className: 'redColor'
        },{
          title: '缝制数',
          dataIndex: 'sewQua',
          key: 'sewQua',
          width: 80,
        },{
          title: '缝制欠数',
          dataIndex: 'sewQuaRemain',
          key: 'sewQuaRemain',
          width: 80,
          className: 'redColor'
        },{
          title: '后整数',
          dataIndex: 'afterQua',
          key: 'afterQua',
          width: 80,
        },{
          title: '后整欠数',
          dataIndex: 'afterQuaRemain',
          key: 'afterQuaRemain',
          width: 80,
          className: 'redColor'
        },{
          title: '包装数',
          dataIndex: 'packQua',
          key: 'packQua',
          width: 80,
        },{
          title: '包装欠数',
          dataIndex: 'packQuaRemain',
          key: 'packQuaRemain',
          width: 80,
          className: 'redColor'
        },{
          title: '操作',
          dataIndex: 'cz',
          key: 'cz',
          width: 120,
          render: (text, record) => (
              record.operateId == this.uid ? (
                <span className="pdp_update_btn" onClick={this.updateProcessClick.bind(this,record)}>
                  更新数据
                </span>
              ) : null
          ),
        }
      ];
        return (
          <div className="production_manage_process_box">
            <div className="production_manage_process_serchdiv">
                <span className="production_manage_process_serchspan">款号：</span>
                <input className="pro_overflow_inputSty production_manage_process_serchInp" placeholder = '请输入款号' value={this.state.searchStyleNo}
                       onFocus={this.onfocusInput.bind(this)} onChange={this.searchStyleNo.bind(this)}
                       onBlur={this.bluronInput.bind(this)} ref={'styleNo'}
                />
                <span className="production_manage_process_serchspan">客户：</span>
                <input className="pro_overflow_inputSty production_manage_process_serchInp" placeholder = '请输入客户名' value={this.state.searchInput}
                       onFocus={this.onfocusInput.bind(this)} onChange={this.searchChange.bind(this)}
                       onBlur={this.bluronInput.bind(this)} ref={'enName'}
                />
                <Button onClick={this._SearchByClient.bind(this)}>搜索</Button>
            </div>
            <Table
              columns={columns}
              dataSource={this.state.processData}
              pagination={false}
              rowKey={record => record.gid}
              loading={this.state.loading}
              className="order_table production_process_table"
            />
            <br/>
            <div className="message_pagination">
              <span>总计{this.state.totalResult}条</span>
              <span>共{this.pageTotal()}页</span>
              <span>第 <input style={{width: 20,border: '1px solid #ccc', borderRadius: '3px', textAlign: 'center'}}  value = {this.state.pageNum} onChange = {this.pageChange.bind(this)}/> 页</span>
              <button className="message_confirmBtn" onClick={this.confirm.bind(this)}>确定</button>
              <span className="message_prev_next_btn">
                <b className="message_prev" onClick={this.leftBtn.bind(this)}></b>
                <b className="message_next" onClick={this.rightBtn.bind(this)}></b>
              </span>
             </div>
          </div>
        )
    }
}
